<template>
  <Layout class="layout-100">
    <Header class="header-cont">生成用户</Header>
    <Content class="content-cont">
      <Row>
        <Col span="12">
        <div>
          <Layout class="layout-100">
            <Header class="header-cont">通用角色</Header>
            <Content class="content-cont">
              <CheckboxGroup @on-change="changeNormalRoleList1"  v-model="normalRoleIdList">
                <Checkbox v-for="item in normalRoleList" :true-value="item.id" :label="item.id" border>{{item.name}}</Checkbox>
              </CheckboxGroup>
            </Content>
          </Layout>
        </div>
        </Col>
        <Col span="12">
        <div>
          <Layout class="layout-100">
            <Header class="header-cont">专用角色</Header>
            <Content class="content-cont">
              <CheckboxGroup v-model="specialRoleIdList" @on-change="changeSpecialRoleList1">
                <Checkbox v-for="item in specialRoleList" :true-value="item.id" :label="item.id" border>{{item.name}}</Checkbox>
              </CheckboxGroup>
            </Content>
          </Layout>
        </div>
        </Col>
      </Row>
    </Content>
    <Footer class="footer-cont">
      <Button type="primary" @click="saveSubmit()">保存</Button>
      <Button @click="closetab(0)">取消</Button>
    </Footer>
  </Layout>
</template>

<script>
  export default {
    name: 'CreateUser',
    props:["personId"],
    data() {
      return {
        specialRoleList: [],
        normalRoleList: [],
        normalRoleIdList:[],
        specialRoleIdList: [],
        changeNormalRoleList: [],
        checkSpecialRoleList:[],
        checkNormalRoleList:[],
      }
    },
    methods: {
      getUserRoles(){
       let id = this.personId;
        this.$api.ProjectPerson.availableRoles(id).then(res => {
          if (res.code === 200) {
            this.normalRoleList = res.data.normalRoleList;
            this.specialRoleList = res.data.specialRoleList;
          } else {
            this.$Message.error(res.message)
          }
        })
      },
      //选择通用角色
      changeNormalRoleList1(){
        this.normalRoleList.forEach(item=>{
          this.normalRoleIdList.forEach(val=>{
            if(item.id == val){
              item.selected = true;
            }
          })
        })
        this.checkNormalRoleList = this.normalRoleList;
      },
      //选择专业角色
      changeSpecialRoleList1(){
        this.specialRoleList.forEach(item=>{
          this.specialRoleIdList.forEach(val=>{
            if(item.id == val){
              item.selected = true;
            }
          })
        })
        this.checkSpecialRoleList = this.specialRoleList;
      },
      saveSubmit(){
        if(this.checkNormalRoleList.length == 0 && this.checkSpecialRoleList.length == 0){
          this.$Message.error('请勾选角色')
          return;
        }
        let params = {
          personUserOrgId:this.personId,
          normalRoleList:this.checkNormalRoleList,
          specialRoleList:this.checkSpecialRoleList
        }
        this.$api.ProjectPerson.genUser(params).then(res => {
          if (res.code === 200) {
            this.closetab(1)
          } else {
            this.$Message.error(res.message)
          }
        })
      },
      closetab(code){
        this.$emit('func', code)
      }
    },
    mounted() {
     this.getUserRoles();
    }
  }
</script>

<style scoped>

</style>